<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title th:text="${#session.getAttribute('title')}">Title</title>
    <link th:href="@{/css/admin/set.css}" rel="stylesheet" type="text/css" media="screen,print"/>
    <link th:href="@{/css/footer.css}" rel="stylesheet" type="text/css" media="screen,print"/>
    <script th:src="@{/webjs/jquery-1.10.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/webjs/convert_pinyin.js}" type="text/javascript"></script>
    <link th:href="@{/webcss/bootstrap.css}" rel="stylesheet" type="text/css" media="screen,print"/>
    <script th:src="@{/webjs/bootstrap.js}" type="text/javascript"></script>
    <script th:src="@{/js/admin/set.js}" type="text/javascript"></script>
    <link th:href="@{/webcss/table.css}" rel="stylesheet" type="text/css" media="screen,print"/>
    <script th:src="@{/webjs/table.js}" type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
          integrity="sha384-..." crossorigin="anonymous">
</head>
<style>
    .form-check {
        margin-right: 2em; /* 增加右侧外边距 */
        display: flex; /* 使内部元素在同一行 */
        align-items: center; /* 垂直居中 */
    }

    .form-check-label {
        margin-left: 0.5em; /* 为标签增加一些左侧内边距 */
    }

    .loading-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1060; /* 设置较高的z-index*/
        display: none;
    }

    .loading-indicator {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
<body>
<div class="container mt-5 d-flex flex-column align-items-center justify-content-center">
    <h2 class="mb-4">设置</h2>
    <br><br>
    <!--模态框-->
    <div>
        <!--重置积分弹窗模态框 -->
        <div class="modal fade" id="confirmResetModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">确认重置积分</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>您确定要重置所有人的积分吗？（该功能请在学期初使用）</p>
                        <form>
                            <div class="form-group d-flex justify-content-center">
                                <!-- 确保这是你想要的默认选项 -->
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="resetPointsOption"
                                           id="resetPointsToZero" value="0">
                                    <label class="form-check-label" for="resetPointsToZero">
                                        重置积分为0
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="resetPointsOption"
                                           id="resetPointsToHundred" value="100" checked>
                                    <label class="form-check-label" for="resetPointsToHundred">
                                        重置积分为100
                                    </label>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <div id="resetCountdown" class="btn btn-primary countdown-btn">5</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 重置科室密码模态框 -->
        <!-- 管理科室模态框 -->
        <div class="modal fade" id="manageDepartmentModal" tabindex="-1" role="dialog"
             aria-labelledby="manageDepartmentModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="manageDepartmentModalLabel">管理科室</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <!-- 科室列表 -->
                        <div id="departmentListContainer">
                            <!-- 科室项将在这里动态生成 -->
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger me-2" id="confirmDeleteDepartment">删除科室</button>
                        <button type="button" class="btn btn-primary" id="confirmResetDepartmentPassword">重置科室密码
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新增账号模态框 -->
        <div class="modal fade" id="addAccountModal" tabindex="-1" role="dialog" aria-labelledby="addAccountModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addAccountModalLabel">新增账号</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="accountForm">
                            <div class="form-group">
                                <label for="accountRole">角色：</label>
                                <select class="form-control" id="accountRole" required>
                                    <option value="">请选择角色</option>
                                    <option value="2">部门负责人</option>
                                    <option value="1">老师</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="accountName">姓名（部门）</label>
                                <input type="text" class="form-control" id="accountName" placeholder="请输入姓名（部门）"
                                       pattern="[\u4e00-\u9fa50-9]+" required>
                            </div>
                            <div class="form-group">
                                <label for="phone">账号（手机号）</label>
                                <input type="text" class="form-control" id="phone" placeholder="请输入手机号"
                                       pattern="[0-9]+" required>
                            </div>
                            <div class="form-group">
                                <label for="accountNumber">密码</label>
                                <input type="text" class="form-control" id="accountNumber" value="666666" readonly>
                            </div>
                            <div class="form-group" id="accountPointsDiv">
                                <label for="accountPoints">积分</label>
                                <input type="text" class="form-control" id="accountPoints" value="0" readonly>
                            </div>
                            <div class="form-group" id="gradeSelectDiv">
                                <label for="gradeSelect">请选择年级：</label>
                                <select class="form-control" id="gradeSelect" required>
                                    <option value="">请选择年级</option>
                                </select>
                            </div>

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="confirmAddAccount">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 修改标题模态框 -->
        <div class="modal fade" id="editTitleModal" tabindex="-1" role="dialog" aria-labelledby="editTitleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editTitleModalLabel">修改标题</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <!-- 输入框 -->
                        <label for="newTitleInput"></label><input type="text" class="form-control" id="newTitleInput"
                                                                  placeholder="请输入新标题" required>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="confirmEditTitle">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 删除年级模态框 -->
        <div class="modal fade" id="gradeManageModal" tabindex="-1" role="dialog"
             aria-labelledby="gradeManageModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteGrade">删除年级</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <!-- 科室列表 -->
                        <div id="gradeListContainer">
                            <!-- 科室项将在这里动态生成 -->
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="deleteGradeConfirm" disabled>
                            确认
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新增年级模态框 -->
        <div class="modal fade" id="addGradeModal" tabindex="-1" role="dialog"
             aria-labelledby="addGradeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addGradeModalLabel">新增年级</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <!-- 输入框 -->
                        <div class="form-group">
                            <label for="newGradeId">请输入年级编号</label>
                            <input type="number" class="form-control" id="newGradeId" min="1"
                                   placeholder="请输入年级名称" required>
                        </div>
                        <!-- 输入框 -->
                        <div class="form-group">
                            <label for="newGradeName">年级名称：</label>
                            <input type="text" class="form-control" id="newGradeName" placeholder="请输入年级名称"
                                   required>
                        </div>
                        <p>
                            年级编号仅限正整数，用于导入名单，且勿输入已存在的年级编号（管理年级页面可查看已存在的年级编号）</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="confirmAddGrade">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 修改密码模态框 -->
        <div class="modal fade" id="changePasswordModal" tabindex="-1" role="dialog"
             aria-labelledby="changePasswordModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="changePasswordModalLabel">修改密码</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <!-- 输入框部分 -->
                        <div class="mb-3 w-100">
                            <label for="originalPassword" class="form-label">原密码</label>
                            <input type="password" class="form-control" id="originalPassword"
                                   placeholder="请输入原密码">
                        </div>
                        <div class="mb-3 w-100">
                            <label for="newPassword" class="form-label">新密码</label>
                            <input type="password" class="form-control" id="newPassword" placeholder="请输入新密码">
                        </div>
                        <div class="mb-3 w-100">
                            <label for="confirmNewPassword" class="form-label">确认新密码</label>
                            <input type="password" class="form-control" id="confirmNewPassword"
                                   placeholder="请再次输入新密码">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <!-- 重置、确认修改 -->
                        <button type="button" id="resetBtn" class="btn btn-primary">重置</button>
                        <button type="button" id="submitBtn" class="btn btn-primary">确认修改</button>
                    </div>
                </div>
            </div>
        </div>
        <!--导入名单模态框-->
        <div class="modal fade" id="importListConfirmModal" tabindex="-1" role="dialog"
             aria-labelledby="importListConfirmModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="importListConfirmModalLabel">提示</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        导入名单需使用特定模板，请确认是否已有模板。
                    </div>
                    <div class="modal-footer d-flex justify-content-between">
                        <button type="button" class="btn btn-primary" id="noTemplate">无模板</button>
                        <button type="button" class="btn btn-primary" id="haveTemplate">已有模板</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 文件上传模态框 -->
        <div class="modal fade" id="uploadFileModal" tabindex="-1" role="dialog"
             aria-labelledby="uploadFileModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="uploadFileModalLabel">上传文件</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="uploadForm" enctype="multipart/form-data">
                            <div class="form-group">
                                <label for="fileInput">选择文件</label>
                                <input type="file" class="form-control-file" id="fileInput" name="file">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="uploadFile">导入</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 查看日志模态框 -->
        <div class="modal fade" id="logDetailsModal" tabindex="-1" role="dialog"
             aria-labelledby="logDetailsModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="logDetailsTitle">日志详情</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <!-- 日志表格 -->
                        <table class="table table-striped" id="logTable">
                            <thead>
                            <tr>
                                <th scope="col">描述</th>
                                <th scope="col">操作人</th>
                                <th scope="col">操作时间</th>
                                <th scope="col">状态</th>
                                <th scope="col">备注</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <!-- 分页按钮 -->
                    <nav aria-label="Page navigation">
                        <ul class="pagination justify-content-center"></ul>
                    </nav>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--按钮-->
    <div class="buttons-container">
        <button type="button" id="resetPointsBtn" class="btn btn-danger">重置所有人积分</button>
        <br>
        <!-- 查看日志按钮 -->
        <button type="button" id="viewLogsBtn" class="btn btn-info">查看日志</button>
        <br>
        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
                        aria-expanded="false">
                    修改标题
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" id="update">修改上标题</a></li>
                    <li><a class="dropdown-item" id="updateSmall">修改下标题</a></li>
                </ul>
            </div>
        </div>
        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
                    aria-expanded="false">
                管理科室、年级
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" id="gradeManage">删除年级</a></li>
                <li><a class="dropdown-item" id="gradeInsert">新增年级</a></li>
                <li><a class="dropdown-item" id="manageDepartment">管理科室</a></li>
            </ul>
        </div>
        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
                    aria-expanded="false">
                管理人员
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" id="addAccountBtn">新增账号</a></li>
                <li><a class="dropdown-item" id="importListBtn">导入名单</a></li>
            </ul>
        </div>
        <button type="button" id="changePasswordBtn" class="btn btn-primary">修改密码</button>
        <br>
        <button type="button" id="logoutBtn" class="btn btn-primary">退出</button>
    </div>
    <!-- 加载蒙版层 -->
    <div class="loading-mask" id="loadingMask">
        <div class="loading-indicator">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    </div>
</div>
<!-- 自定义警告区域 -->
<div id="customAlert"></div>
<footer class="footer fixed-bottom">
    <div class="footer-links d-flex justify-content-center">
        <a href="toAdminIndex" class="footer-link"><i class="fas fa-chart-line"></i> 排行榜</a>
        <a href="toBar" class="footer-link"><i class="fas fa-chart-bar"></i> 分析情况</a>
        <a href="toSetting" class="footer-link active"><i class="fas fa-cog"></i> 设置</a>
    </div>
</footer>
</body>

</html>